
<!DOCTYPE html>
<html>
<head>
  <title>即住·{{ cityname }}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

     <script type="text/javascript">
	// 百度地图API功能

    function MyMap(lng,lat,Mid) {
        {#alert(lng+";"+lat+";"+Mid)#}
        var map = new BMap.Map("allmap"+Mid);
	    var point = new BMap.Point(lng,lat);

	    map.addControl(new BMap.NavigationControl())
	    map.addControl(new BMap.ScaleControl())
	    map.centerAndZoom(point, 15);
	    var marker = new BMap.Marker(point);  // 创建标注
	    map.addOverlay(marker);               // 将标注添加到地图中
	    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	    var stCtrl = new BMap.PanoramaControl(); //构造全景控件
	    stCtrl.setOffset(new BMap.Size(20, 20));
	    map.addControl(stCtrl);//添加全景控件
    }

</script>



	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Pg19vaox5Ht0LnTiPhOFkmYBvh3qdR9e"></script>



  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 30%;
  }
   .container{
       max-width: 100%;
   }
  </style>
    <link rel="stylesheet" type="text/css" href="/static/css/layui.css">
<style type="text/css">
.body{
	padding:0;
	margin:0;
	color:#444;
	background: #ffffff;
}

.Fullwrap{
	width:100%;
	max-width: 600px;
	margin:0 auto;
}
.label-selected{
	width: 100%;
	min-height:38px;
	margin:10px 0;
	border:1px solid #ccc;
	background-color: #fff;
	position: relative;
}
.cell{
	display: block;
	width:90px;
	height:28px;
	line-height: 28px;
	border:3px;
	background:#009688;
	color:#fff;
	text-align: center;
}
.label-selected li {
	display: inline-block;
	height: 27px;
	line-height: 27px;
	font-size: .8rem;
	padding: 0 1rem;
	border: 1px solid #e6e6e6;
	border-radius: 2px;
	cursor: pointer;
	margin: 4px 2px;
	color: #666;
}
#labelItem{
	margin-bottom: 10px;
	display: none;
}
.label-item {
	border: 1px solid #e6e6e6;
	padding: 10px;
	border-radius: 0 2px 2px 0;
	position: relative;
	overflow: hidden;
	background: rgba(243, 230, 178, 0.07);
}
.label-item li {
	display: inline-block;
	height: 27px;
	line-height: 27px;
	font-size: .8rem;
	padding: 0 1rem;
	border: 1px solid #e6e6e6;
	border-radius: 2px;
	cursor: pointer;
	margin-bottom: 5px;
	margin-left: 2px;
	color: #666;
}
.label-item .selected{
	color:#ccc;
}
</style>

{#  悬浮div的css和js  #}




</head>
<body>
<div style="width: 100%;height: 30rem;overflow: hidden" >
<div id="demo" class="carousel slide" data-ride="carousel" style="height: 30rem">

  <!-- 指示符 -->

 <div style="position: absolute;margin-left: 41%;top:3rem;z-index: 100;font-size: 10rem;color: white;font-family: '汉仪尚巍手书W'">{{ cityname}} </div>


  <ul class="carousel-indicators" >
      {% for city in cities %}
    <li data-target="#demo" data-slide-to="{{ city.citycount }}" class="{{ city.cityclass }}"></li>
    {% endfor %}
  </ul>

  <!-- 轮播图片 -->
  <div class="carousel-inner">
      {% for city in cities %}
    <div class="carousel-item {{ city.cityclass }}">
      <img src="{{ city.cityimg }}" style="width: 100%;height:40%">
    </div>
    {% endfor %}
  </div>

  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>
</div>
<div style="width: 100%">
    <div class="container" style="width: 100%">

    <div style="margin-top:3rem;margin-bottom: 3rem">

	<div class="row clearfix">
		<div class="col-md-3 column">
            <div class="body"><script src="/static/demos/googlegg.js"></script>

<div id="div1" class="Fullwrap">
	<div class="label-selected" id="changeThat" >
		<a href="javascript:;" class="layui-btn layui-btn-sm show-labelitem" style="float: right; margin: 4px; display: block;line-height: 30px;background-color: #cfc393">展开标签库 </a>
		<a href="javascript:;" class="layui-btn layui-btn-sm hide-labelitem" style="float: right; margin: 4px; display: none;line-height: 30px;background-color: #cfc393">收起标签库 </a>
		<input type="hidden" name="label">
	</div>
	<div class="layui-col-md12" id="labelItem">
	  <!--标签库-->
	  <div class="label-item">
{#		<a href="javascript:;" class="replacelable" style="position: absolute;right:1rem;bottom:.75rem;color: #1994dc" onselectstart="return false">换一批</a>#}

          {% for k,v in tags.items %}
        <span style="margin-top: 3px;font-size: 1.2rem;color: #5e5e5e">{{ k }}</span><br/>
        {% for k1,v1 in v.items %}
            <li data="{{ k1 }}" style="background-color: rgb(243,230,178)"><span>{{ v1.name }}</span></li>
        {% endfor %}<br/>
    {% endfor %}
<a href="javascript:;" class="layui-btn" id="cell" style="background-color: #cfc393;float: right">获取</a>
	  </div>
	</div>
</div>
{#<div id="hello" style="top: 0"></div>#}
                <div id="div2"></div>

<script type="text/javascript" src="/static/js/stickToTop.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer.js"></script>
<script type="text/javascript">
$(function(){
  $(".show-labelitem").on("click",function(){
    $(this).hide();
    $(".hide-labelitem").show();
    $("#labelItem").show();
  });
  $(".hide-labelitem").on("click",function(){
    $(this).hide();
    $(".show-labelitem").show();
    $("#labelItem").hide();
  });
  $(".label-item").on("click","li",function(){
    var id = $(this).attr("data");
    var text = $(this).children("span").html();
    var labelHTML = "<li data='"+id+"''>x "+text+"</li>";
    if($(this).hasClass("selected")){
      return false;
    }else if($(".label-selected").children("li").length >= 8){
      layer.msg("最多可以选择8个哦");
      return false;
    }
    $(".label-selected").append(labelHTML);
    val = '';
    for(var i = 0; i < $(".label-selected").children("li").length; i++){
      val += $(".label-selected").children("li").eq(i).attr("data")+',';
    }
    $("input[name='label']").val(val);
    $(this).addClass("selected");
  });
  var val = "";
  $(".label-selected").on("click","li",function(){
    var id = $(this).attr("data");
    val = '';
    $(this).remove();
    for(var i = 0; i < $(".label-selected").children("li").length; i++){
      val += $(".label-selected").children("li").eq(i).attr("data")+',';
    }
    $("input[name='label']").val(val);
    $(".label-item").find("li[data='"+id+"']").removeClass("selected");
  });


  //点击更换标签
  var limit = 0;
  $(".replacelable").on("click",function(){
    layer.load(1);
    limit += 32;
    $.ajax({
      url:window.location.href,
      type:"post",
      datatype:"json",
      data:{
        labellimit:limit
      },
      success:function(data){
        layer.closeAll('loading');
        $(".label-item").find("li").remove();//删除原先所有，本来想让数据表随机搜索的，想着有点mmp，就没搞，用的是limit
        var html = '';
        for(var i in data){
          html += "<li data=\""+data[i].term_id+"\">x<span>"+data[i].name+"</span></li>";//拼接标签
        }
        $(".label-item").append(html);//追加至文档
      },
      error:function(){
        layer.closeAll('loading');
        layer.msg("错误~~~");
      }
    })
  })
  //获取标签
  $("#cell").on("click",function(){
  	if($("input[name='label']").val() == ""){
  		return false;
  	}else{
		{#layer.msg("标签内容为："+$("input[name='label']").val());#}
        window.location.href="/houses/{{ cityname }}/?tags="+$("input[name='label']").val()+"&start={{ start }}"
  	}
  })
})
</script>


</div>
        </div>
{#            <div style="width: 30%;#}
{#            margin-left: 2rem;#}
{#            position: absolute;#}
{#            height: 4rem;#}
{#            background-color: gray;">#}



{#            </div>#}

		<div class="col-md-9 column">
            <div class="container">
  <div id="accordion">
      {% for house in houses %}
    <div class="card" style="width: 25.5rem;float: left;margin: 0 auto">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#house{{ house.houseid }}" onclick="MyMap( {{ house.houseJ }},{{ house.houseW }},{{ house.houseid }})">
         <img src="{{ house.houseimg }}" style="width: 98%" >
            <div >
                <div style="font-size: 17px;color: #565656;font-weight: bold">{{ house.housename }}</div>
                <a href="/housesingle/{{ house.houseid }}/"><div style="float: right;font-size: 17px;width: 4.5rem;height: 3rem;text-align: center;margin-top: 1rem;padding-top: 0.7rem;font-weight: bold;background-color: #aea47c;color: white">{{ house.houseprice }}￥</div></a>
                <div style="margin-top: 1rem;color: #655d49 ;overflow: hidden">{{ house.houseplace }}</div>
            </div>
        </a>
      </div>
      <div id="house{{ house.houseid }}" class="collapse" data-parent="#accordion">
        <div class="card-body">
          <div id="allmap{{ house.houseid }}" style="width: 100%;height: 20rem"></div>
        </div>
      </div>
    </div>
{% endfor %}
  </div>
</div>
		<div class="col-md-0 column">
		</div>
	</div>
</div>
</div>
    <div style="margin:  0 auto">
    <ul class="pagination" style="margin-left: 50%">
     {% if start == 1 %}
        {% else %}
    <li style="font-size: 1.6rem;background-color: rgba(207,195,147,0.21);color: #f3e6b2;width: 2.2rem;border: 1.3px solid rgba(174,169,133,0.22);border-top-left-radius: 20px;border-bottom-left-radius: 20px;text-align:  center;height: 2.2rem;"><a href="/houses/{{ cityname }}/?start={{ page }}&next=before{% if ytags %}&tags={{ ytags }}{% endif %}" style="color: #b3a47e">&laquo;</a></li>
        {% endif %}
        {% for page in pageNow %}
        <li style="font-size: 1.6rem;background-color: rgba(207,195,147,0.21);color: #f3e6b2;width: 2.2rem;border: 1.3px solid rgba(174,169,133,0.22);text-align:  center;height: 2.2rem;"><a href="/houses/{{ cityname }}/?start={{ page }}{% if ytags %}&tags={{ ytags }}{% endif %}" style="color: #b3a47e">{{ page }}</a></li>
    {% endfor %}

    {% if start != maxnum %}
    <li style="font-size: 1.6rem;background-color: rgba(207,195,147,0.21);color: #f3e6b2;width: 2.2rem;border: 1.3px solid rgba(174,169,133,0.22);border-top-right-radius: 20px;border-bottom-right-radius: 20px;text-align:  center;height: 2.2rem;"><a href="/houses/{{ cityname }}/?start={{ page }}&next=next{% if ytags %}&tags={{ ytags }}{% endif %}" style="color: #b3a47e">&raquo;</a></li>
    {% endif %}
</ul><br>
    </div>
</body>
</html>
